<!-- 自定义底部导航栏 -->
<template>
  <view class="container1">
    <view
      class="tabbar-item"
      :class="[item.centerItem ? ' center-item' : '']"
      :style="'width: calc(100% /' + tabbarList.length + ')'"
      @tap="changeItem(item)"
      v-for="(item, i) in tabbarList"
      :key="i"
    >
	  <view v-if="item.text == ''" class="item-top" style="position: relative;">
		  <image :src="curItem === item.id ? item.selectedIconPath : item.iconPath"/>
	  </view>
      <view v-else class="item-bottom" :class="curItem == item.id ? 'item-active' : ''" >{{ item.text }}</view>	
    </view>
  </view>
</template>
 
<script>
export default {
  props: {
    /* 当前导航栏 */
    currPage: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      curItem: 0, // 当前所选导航栏
      tabbarList: [
        {
          id: 0,
		  pagePath: "/pages/index", //页面路径，必须在 pages 中先定义
			
          text: "首页"
        },
	
        // {
        //   id: 1,
        //   pagePath: "/pages/ycategory",
         
        //   text: "商城",
        //   centerItem: false
        // },
		
        {
          id: 1,
          pagePath: "/pages/user",        
          text: "我",
          centerItem: false
        }
		
      ], // 导航栏列表
	  noticeNum: 0
    };
  },
  mounted() {	 
    this.curItem = this.$store.state.common.currPage;
	this.noticeNum = this.$store.state.statistics.notice.notice + this.$store.state.statistics.notice.order + this.$store.state.statistics.notice.system + this.$store.state.statistics.notice.chat;

  },
  methods: {
    /* 导航栏切换 */
    changeItem(e) {
		
		this.$store.state.common.currPage = e.id;		

		this.noticeNum = this.$store.state.statistics.notice.notice + this.$store.state.statistics.notice.order + this.$store.state.statistics.notice.system + this.$store.state.statistics.notice.chat;
         
		 // if(e.id == 2){
			//  this.$wanlshop.msg('本功能正在准备中，敬请期待!');return;	
		 // } 

		  uni.switchTab({ 
			  url: e.pagePath,
			  success(){},
			  fail(e){
				  console.log(": " + JSON.stringify(e));
			  }
		   }); // 跳转到其他 tab 页面
	  //
    }
  }
};
</script>
 
<style lang="scss" scoped>
$textDefaultColor: #999; // 文字默认颜色
$bottomBg: #ECECEC; // 底部背景
$textSelectedColor: #E93332; // 文字选中颜色
$centerItemBg: #fff; // 中间凸起按钮背景
.container1 {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 110rpx;
  color: $textDefaultColor;
  padding: 5rpx 0;
  background-color: $bottomBg;
  box-shadow: 0 0 10rpx #999;
  flex-direction: row;
  z-index: 100;
}
.tabbar-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100rpx;
  .item-top {
    flex-shrink: 0;
    width: 65rpx;
    height: 65rpx;
    padding: 4rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .item-bottom {
    width: 100%;
	color:black;
	font-weight: 700;
	font-size: 38rpx;
  }
  .item-active {
    color: $textSelectedColor;
  }
}
.center-item {
  position: relative;
  .item-top {

    width: 86rpx;
  }
  .item-bottom {
    
  }
}
</style>